<template>
  <a-modal v-model:visible="modalVisible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 选择人员 </template>
    <a-radio-group direction="vertical" v-model="humanId" @change="change">
      <a-radio v-for="item in humanList" :key="item.id" :value="item.id">
        {{ item.name }}
      </a-radio>
    </a-radio-group>
  </a-modal>
</template>
<script setup lang="ts">
import {
  GetHumanRosterList,
  delFlowConditionItemByIds
} from '@/apis/flowPanelPoint';
import { useVModel } from '@vueuse/core';

const props = withDefaults(
  //参数说明
  defineProps<{
    visible: boolean;
    selectedId?: number;
  }>(),
  {
    visible: false
  }
);
const emits = defineEmits(['update:visible', 'update:data', 'submit']);
const modalVisible = useVModel(props, 'visible', emits);
const sId = useVModel(props, 'selectedId', emits);
const humanId = ref();
const handleOk = () => {
  selectedIds.value.forEach((item) => {
    const humanInfo = humanList.value.find((human) => human.id === item);
    if (!humanInfo) return;
    const { id, name } = humanInfo;
    sId.value = id;
  });

  modalVisible.value = false;
  emits('submit');
};
const handleCancel = () => {
  modalVisible.value = false;
};
const change = async () => {
  await delFlowConditionItemByIds({ ids: [105, 106, 107] });
};
const humanList = ref<any[]>([]);
const getHumanList = async () => {
  const res = await GetHumanRosterList({
    pageNumber: 0,
    pageSize: 20,
    typeName: 5
  });
  humanList.value = res?.content || [];
};
const selectedIds = ref<any[]>([]);
watch(
  () => modalVisible.value,
  () => {
    if (!modalVisible.value) return;
    humanId.value = props.selectedId;
    getHumanList();
  }
);
</script>
